<template>
  <div class="header-box">
    <div class="header">
      <div class="content">
        <div class="logo">
          <div @click="jump('home')">
            <img src="/static/image/head-logo.svg" alt="">
          </div>
        </div>
        <div class="nav">
          <ul>
            <li v-for="item in nav_list" v-if="item.opt==0">
              <router-link :to="item.link">{{ item.name }}</router-link>
<!--              <span @click="jump('course')" :class="nav_name=='course'?'current':''">{{ item.name }}</span>-->
            </li>
          </ul>
        </div>

        <div v-if="token" class="login-bar full-right">
          <div class="shop-cart full-left">
            <span class="shop-cart-total">{{ $store.state.cart.total }}</span>
            <img src="/static/image/cart.svg" alt="">
            <span><router-link to="/cart">购物车</router-link></span>
          </div>
          <div class="login-box full-left">
            <router-link to="">学习中心</router-link>
            <el-menu width="200" class="member el-menu-demo" mode="horizontal">
              <el-submenu index="2">
                <template slot="title"><router-link to=""><img src="/static/image/logo@2x.png" alt=""></router-link></template>
                <el-menu-item index="2-1">我的账户</el-menu-item>
                <el-menu-item index="2-2"><router-link to="/user/order">我的订单</router-link></el-menu-item>
                <el-menu-item index="2-3">我的优惠卷</el-menu-item>
                <el-menu-item index="2-3"><span @click="logout">退出登录</span></el-menu-item>
              </el-submenu>
            </el-menu>
          </div>
        </div>
        <div v-if="!token" class="login-bar">
          <div class="shop-cart">
            <img src="/static/image/cart.svg" alt="">
            <span><router-link :to="{ name: 'cart' }" target="_blank">购物车</router-link></span>
          </div>
          <div class="login-box">
            <span><router-link :to="{ name: 'login' }">登录</router-link></span>
            <span>|</span>
            <span><router-link :to="{ name: 'register' }">注册</router-link></span>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
    export default {
      name: "Header",
      data() {
        return {
          token: null,
          nav_name: '',
          nav_list: []
        }
      },
      created(){
        if (localStorage.token) {
          this.token = localStorage.token;
        }
        if (sessionStorage.token) {
          this.token = sessionStorage.token;
        }

        // this.nav_name = localStorage.nav_name;
        this.$axios.get(this.$settings.Host + '/home/nav/')
            .then(res => {
                this.nav_list = res.data
            })
            .catch(err => console.log(err))
      },
      // mounted () {
      //   console.log('header', this.token);
      // },
      methods: {
        jump (location) {
          localStorage.setItem('nav_name', location);

          this.$router.push({
            name: location
          })
          .catch(err => err)  // 要加上这个，不加多次点击或报错
        },
        logout () {
            // 退出登录
            this.token = false;
            sessionStorage.removeItem('token');
            sessionStorage.removeItem('user_id');
            sessionStorage.removeItem('user_name');
            localStorage.removeItem('token');
            localStorage.removeItem('user_id');
            localStorage.removeItem('user_name');

            let self = this;
            this.$message({
                message: '退出成功',
                type: 'success',
                duration: '1500',
                onClose () {
                    self.$router.push('/');
                }
            })
        }
      },

    }
</script>

<style scoped>
/*<!-- 因为header定位了，轮播图会占领原本header部分，所以我们得设置一个box占领位置 -->*/
  .header-box {
    width: 100%;
    height: 80px;
  }
  .header {
    width: 100%;
    height: 80px;
    /*box-sizing: border-box;*/
    /*border-bottom: 1px solid hsla(0,0%,59%,.1);*/
    box-shadow: 0 0.5px 0.5px 0 #c9c9c9;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background-color: #fff;
  }
  .header .content {
    max-width: 1200px;
    width: 100%;
    height: 100%;
    line-height: 80px;
    margin: 0 auto;
  }
  .header .logo {
    float: left;
    height: 80px;
    margin-right: 50px;
  }
  .logo img {
    width: 118px;
    height: 36px;
    margin-top: 22px;
  }
  .header .nav {
    float: left;
  }
  .header .nav ul li {
    float: left;
    margin-right: 30px;
    color: #4a4a4a;
    cursor: pointer;
  }
  .header .nav ul li span {
    padding: 15px 0;
  }
  .header .nav ul li span.current {
    border-bottom: 2px solid #ffc210;
  }
  .header .nav ul li:hover {
    color: #000;
  }
  .header .login-bar {
    float: right;
    font-size: 14px;
  }
  .header .login-bar .shop-cart {
    float: left;
    width: 88px;
    height: 28px;
    margin-top: 28px;
    margin-right: 15px;
    border-radius: 17px;
    cursor: pointer;
    background-color: #f7f7f7;
    line-height: 28px;
    text-align: center;
    position: relative;
  }
  .header .login-bar .shop-cart:hover {
    background-color: #f0f0f0;
  }
  .header .login-bar .shop-cart img {
    width: 15px;
  }
  .header .login-bar .login-box1{
    margin-top: 16px;
  }
  .header .login-bar .login-box2{
    margin-top: 34px;
  }
  .header .login-bar .shop-cart-total{
    width: 16px;
    height: 16px;
    line-height: 17px;
    font-size: 12px;
    color: #fff;
    text-align: center;
    background: #fa6240;
    border-radius: 50%;
    transform: scale(.8);
    position: absolute;
    left: 16px;
    top: -1px;
}
  .header .login-bar .login-box {
    float: right;
    color: #4a4a4a;
    cursor: pointer;
  }
  .header .login-bar .login-box span:hover {
    color: #000;
  }
  .member{
    display: inline-block;
    height: 34px;
    margin-left: 20px;
  }
  .member img{
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-block;
  }
  /*.member img:hover{*/
  /*  border: 1px solid yellow;*/
  /*}*/
</style>


